﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MU-css</title>
<meta name="keywords" content="MU-CSS"/>
<meta name="description" content="MU-CSS"/>
<meta name="author" content="keqie,keqie@keqie.com">
<link rel="stylesheet" href="mu.css">
</head>
<body>



<div class="topbar">
	<div class="wrapper">
    	<div class="logo">
        	<a href="./"><font class="danley">keqie</font> 渴切</a>
        </div>
    	<div class="module">
        	<a href="index.html">概述</a>
        	<a href="grid.html">框架</a>
        	<a href="base.html" class="selected">基础css</a>
        	<a href="widget.html">组件</a>
        	<a href="javascript.html">javascript插件</a>
        </div>
        <div class="sub">
        	<a href="index.html">例子</a>
        	<a href="http://mobile.keqie.com">移动版</a>
        </div>
    </div>
</div>



<div class="heading">
  <div class="wrapper">
  	<h1>基础css</h1>
    <h2>通过重置一些不兼容的css代码，能够避免一些不必要的跨浏览器兼容问题，定义了一些常用的css<br>
    类，能够用于快速开发，也能统一网页的风格。</h2>
  </div>
</div>


<div class="wrapper">
	<h1 class="phead">排版<small>默认设置,段落,标题,文本，对字体颜色，锚文本的下划线，颜色，字体做了重写，均采用了最符合中国网站体验的12号字体和 Verdana, Arial, Helvetica, sans-serif 字体。行距22px。这些重写参考了，盛大，腾讯，百度，新浪等众多网站对css重写的选择。</small></h1>
    
	<div class="row">
   	  <div class="four">
           <h2>默认设置</h2>
        采用了符合中国人阅读习惯的font-size:12px像素字体，行距line-height:22px像素。字体font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;</div>
    	<div class="four">
           <h2>段落排版</h2>
    	   <p>级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。</p>
    	   <p>比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。</p>
    	</div>
    	<div class="four">
           <h2>标题排版</h2>
    	   <h1>H1文本演示</h1>
            <h2>H2文本演示</h2>
            <h3>H3文本演示</h3>
            <h4>H4文本演示</h4>
            <h5>H5文本演示</h5>
        </div>
  	</div>
    
    <div class="row">
    	<div class="twelve">
        	<h2>加粗，小号，大号，上标，下标</h2>
            <div>
            	<table width="200" border="0" class="table">
  <tr>
    <td>元素</td>
    <td>演示</td>
    <td>说明</td>
  </tr>
  <tr>
    <td><code>&lt;strong&gt;</code></td>
    <td><strong>这是一段加粗的文字</strong></td>
    <td>&lt;strong&gt;...&lt;/strong&gt; &lt;b&gt;在w3c新标准中已经不建议使用了</td>
  </tr>
  <tr>
    <td><code>&lt;u&gt;</code></td>
    <td><u>这是一段下划线的文字</u></td>
    <td>&lt;u&gt;...&lt;/u&gt;</td>
  </tr>
  <tr>
    <td><code>&lt;em&gt;</code></td>
    <td><em>这是一段斜体的文字</em></td>
    <td>&lt;em&gt;...&lt;/em&gt; &lt;i&gt;在w3c新标准中已经不建议使用了</td>
  </tr>
  <tr>
    <td><code>&lt;del&gt;</code></td>
    <td><del>这是一段删除线文字</del></td>
    <td>不赞成使用。使用&lt;del&gt;代替。</td>
  </tr>
  <tr>
    <td><code>&lt;sup&gt;</code></td>
    <td>演示<sup>这是一段上标文字</sup></td>
    <td>定义上标字。</td>
  </tr>
  <tr>
    <td><code>&lt;sub&gt;</code></td>
    <td>演示<sup>这是一段下标文字</sup></td>
    <td>定义下标字。</td>
  </tr>
  <tr>
    <td><code>&lt;small&gt;</code></td>
    <td>演示<small>这是一段小号文字</small></td>
    <td>定义小号字。</td>
  </tr>
  <tr>
    <td><code>&lt;big&gt;</code></td>
    <td>演示<big>这是一段加大号文字</big></td>
    <td>定义加大号字。</td>
  </tr>
</table>

            </div>
        </div>
    	
    </div>
    
    	<h2>引用</h2>
    <div class="row">
    	<div class="two">
            <div>引用常常被用于评论中，在网页中非常常见，用<code>&lt;blockquote&gt;</code>就可以轻松实现一段美观的引用。</div>
        </div>
        <div class="ten">
        	<blockquote>级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。
       	      <blockquote>通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。</blockquote>
        	</blockquote>
        </div>
    	
    </div>
    
    	<h2>abbr</h2>
    <div class="row">
    	<div class="two">
            <div>标签常常用于关键字tag等地方，用<code>&lt;abbr&gt;</code>就可以轻松实现。</div>
        </div>
        <div class="ten">
        	<abbr>css3</abbr>
        	<abbr>html5</abbr>
        </div>
    	
    </div>
    
    
    <div class="row">
    	<h2>列表</h2>
    	<div class="four">
    		<h2>无序列表</h2>
            <p><code>ul</code></p>
            <ul>
            	<li>无序列表是这样表现的</li>
            	<li>无序列表是点点点</li>
            	<li>无序列表是没有罗马文字的</li>
            </ul>
        </div>
        <div class="four">
            <h2>有序列表</h2>
            <p><code>ol</code></p>
            <ol>
            	<li>有序列表是这样表现的</li>
            	<li>有序列表不是是点点点</li>
            	<li>有序列表是有罗马文字的</li>
            </ol>
        </div>
        <div class="four">
            <h2>没有样式的</h2>
            <p><code>&lt;ul class=&quot;unstyled&quot;&gt;</code></p>
            <ul class="unstyled">
            	<li>没有样式是这样表现的</li>
            	<li>没有样式的列表什么也没有</li>
            	<li>没有样式比较干净</li>
            </ul>
        </div>
    	
    </div>
    
    <div class="row">
    	<div class="four">
    		<h2>圈圈</h2>
    		<p><code>&lt;ul class=&quot;circle&quot;&gt;</code></p>
    		<ul class="circle">
            	<li>圈圈列表是这样表现的</li>
            	<li>圈圈列表是圈圈的</li>
            	<li>圈圈列表跟点点很相似</li>
            </ul>
        </div>
        <div class="four">
            <h2>方块</h2>
            <p><code>&lt;ul class=&quot;square&quot;&gt;</code></p>
            <ul class="square">
            	<li>圈圈列表是这样表现的</li>
            	<li>圈圈列表是圈圈的</li>
            	<li>圈圈列表跟点点很相似</li>
            </ul>
        </div>
        <div class="four">
            <h2>中文123</h2>
            <p><code>&lt;ul class=&quot;cjk&quot;&gt;</code></p>
            <ul class="cjk">
            	<li>中文123样式是这样表现的</li>
            	<li>中文123样式的列表什么也没有</li>
            	<li>中文123样式是用汉字一二三排序的</li>
            </ul>
        </div>
    	
    </div>
</div>


<div class="wrapper">
	<h1 class="phead">代码<small>代码区间</small></h1>
    
	<div class="row">
   	  <div class="four">
        <h2>一行代码</h2>
           <pre>body{ background:white;}</pre>
      </div>
    	<div class="four">
           <h2>多行代码</h2>
    	   <pre><ol><li>body{</li><li>background:white;</li><li>font-size:13px;</li><li>line-height:22px;</li><li>}</li></ol></pre>
           <pre class="unstyled">&lt;pre&gt;&lt;ol&gt;&lt;li&gt;body{&lt;/li&gt;
&lt;li&gt;background:white;&lt;/li&gt;
&lt;li&gt;font-size:13px;&lt;/li&gt;
&lt;li&gt;line-height:22px;&lt;/li&gt;
&lt;li&gt;}&lt;/li&gt;
&lt;/ol&gt;&lt;/pre&gt;</pre>
    	</div>
<div class="four">
           <h2>代码着色</h2>
    	   <pre><ol><li class="pink">body{</li><li>background:white;</li><li>font-size:13px;</li><li>line-height:22px;</li><li class="pink">}</li></ol></pre>
         <pre class="unstyled">&lt;pre&gt;&lt;ol&gt;
&lt;li class=&quot;pink&quot;&gt;body{&lt;/li&gt;
&lt;li&gt;background:white;&lt;/li&gt;
&lt;li&gt;font-size:13px;&lt;/li&gt;
&lt;li&gt;line-height:22px;&lt;/li&gt;
&lt;li class=&quot;pink&quot;&gt;}&lt;/li&gt;
&lt;/ol&gt;&lt;/pre&gt;</pre>
        </div>
  	</div>
</div>





<div class="wrapper">
	<h1 class="phead">表格<small>表格的表框，间距等进行了重写让table更美观</small></h1>
	<div class="row">
   	  <div class="four">
          <h2>标记方式</h2>
        <pre>&lt;table class=&quot;table bordered&quot;&gt;
 &lt;tbody&gt;<br>  &lt;tr&gt;<br>   &lt;td&gt;/&lt;/td&gt;<br>   &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>   &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>  &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;tbody&gt;<br>  &lt;tr&gt;<br>   &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>   &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>   &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>  &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;tfoot&gt;<br>  &lt;tr&gt;<br>   &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>   &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>   &lt;td&gt;&amp;nbsp;&lt;/td&gt;<br>  &lt;/tr&gt;
 &lt;/tfoot&gt;<br>&lt;/table&gt;</pre>
      </div>	
    	<div class="eight">
        	<h2>效果演示</h2>
            <pre>&lt;table border=&quot;0&quot; class=&quot;table&quot;&gt;</pre>
        	<table width="200" border="0" class="table">
              <tr>
                <td>/</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </table>
			<h2>斑马表格<small>加上<code>class="table zebra"</code>即可实现斑马表格</small></h2>
            <table width="200" border="0" class="table zebra">
              <tr>
                <td>/</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </table>
            <h2>带边框的表格<small>加上<code>class="table bordered"</code>即可实现带边框的表格</small></h2>
       	  <table width="200" border="0" class="table bordered">
          <thead>
              <tr>
                <td>/</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td class="selected">selected</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div>	
  	</div>
</div>



<div class="wrapper">
  <h1 class="phead">表单<small>对文本框等进行了重写</small></h1> 
	<div class="row">
   	  <div class="four">
          <p>
           	  <br/>
       	通过美化一些表单元素默认样式，例如文本框，按钮，下拉菜单等，让表单更美观。            <br>
        </p>
            <p>通过placeholder属性来完成，文本框的默认值，鼠标点击消失，失去光标，默认值恢复的效果。（改效果在firefox浏览器下可见）</p>
   	  </div>	
    	<div class="eight">
    
        	<form action="" method="get" enctype="multipart/form-data">
            <fieldset>
            <legend>注册表单</legend>
              <p><label>姓名 <small>字符在3~9位</small></label>
                <input name="" type="text" placeholder="请填写真实的姓名">
                <input name="" type="text" placeholder="请填写真实的姓名" class="text radius">
   </p>
              <p>
                <label>自我介绍：</label>
                <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
                
              </p>
              <p>
                <label>爱好：</label>
                <input type="checkbox" name="checkbox" id="checkbox">踢球
                <input type="checkbox" name="checkbox" id="checkbox">上网
                <input type="checkbox" name="checkbox" id="checkbox">冲浪
                
            </p>
              <p>
                <label>性别：</label>
                <input type="radio" name="radio" id="radio" value="radio">男
                <input type="radio" name="radio" id="radio" value="radio">女
               
              </p>
              <p>
                <label>学历：</label>
                <select name="select" id="select">
                  <option value="1">大学/大专</option>
                  <option value="2">高中/中专</option>
                  <option>小学</option>
                </select>
                
              </p>
              <p>
                <label>文件域：</label>
                <input type="file" name="fileField" id="fileField">
                
              </p>
              <p>     
              	<label></label>        
                <input name="" type="submit" class="button blue" value="提交">
                <input name="重置" type="reset" class="button" value="重置">
              </p>
              </fieldset>
            </form>
      </div>	
  	</div>
</div>



<div class="wrapper">
	<h1 class="phead">按钮<small>对按钮或者a标签按钮的样式重写,css3按钮是指通过css3来实现的按钮的效果，css3纯css可以实现立体，渐变，阴影，圆角等很多种特效，如果把这些属性通过各种不同的方式组合在一起就能实现很多不同的炫酷的按钮效果。 </small></h1>
  <div class="row">
    	<div class="twelve">
       	  <table width="100%" border="0" class="table bordered">
  <tr>
    <td>演示</td>
    <td>代码</td>
    <td>功能</td>
  </tr>
  <tr>
    <td><a href="#" class="button">默认</a></td>
    <td><code>&lt;a class=&quot;button&quot;&gt;</code> 或者 <code>&lt;input type=&quot;button&quot; class=&quot;button&quot;&gt;</code></td>
    <td>默认按钮</td>
  </tr>
  <tr>
    <td><a href="#" class="button black">黑色</a></td>
    <td><code>&lt;a class=&quot;button black&quot;&gt;</code> 或者...</td>
    <td>黑色的按钮</td>
  </tr>
  <tr>
    <td><a href="#" class="button orange">橙色</a></td>
    <td><code>&lt;a class=&quot;button orange&quot;&gt;</code> 或者...</td>
    <td>橙色按钮</td>
  </tr>
  <tr>
    <td><a href="#" class="button red">红色</a></td>
    <td><code>&lt;a class=&quot;button red&quot;&gt;</code> 或者...</td>
    <td>红色按钮</td>
  </tr>
  <tr>
    <td><a href="#" class="button blue">蓝色</a></td>
    <td><code>&lt;a class=&quot;button blue&quot;&gt;</code> 或者...</td>
    <td>蓝色按钮</td>
  </tr>
  <tr>
    <td><a href="#" class="button rosy">玫瑰红</a></td>
    <td><code>&lt;a class=&quot;button rosy&quot;&gt;</code> 或者...</td>
    <td>玫瑰红按钮</td>
  </tr>
  <tr>
    <td><a href="#" class="button green">绿色</a></td>
    <td><code>&lt;a class=&quot;button green&quot;&gt;</code> 或者...</td>
    <td>绿色按钮</td>
  </tr>
  <tr>
    <td><a href="#" class="button pink">粉红</a></td>
    <td><code>&lt;a class=&quot;button pink&quot;&gt;</code> 或者...</td>
    <td>粉红按钮</td>
  </tr>
  <tr>
    <td><a href="#" class="button yellow">黄色</a></td>
    <td><code>&lt;a class=&quot;button yellow&quot;&gt;</code> 或者...</td>
    <td>黄色按钮</td>
  </tr>
  <tr>
    <td><a href="#" class="button black bigrounded">圆角</a></td>
    <td><code>&lt;a class=&quot;button black bigrounded&quot;&gt;</code> 或者...</td>
    <td>圆角的按钮</td>
  </tr>
  <tr>
    <td><a href="#" class="button black medium">适中号</a></td>
    <td><code>&lt;a class=&quot;button black medium&quot;&gt;</code> 或者...</td>
    <td>中等号按钮</td>
  </tr>
  <tr>
    <td><a href="#" class="button black small">小号</a></td>
    <td><code>&lt;a class=&quot;button black small&quot;&gt;</code> 或者...</td>
    <td>小号按钮</td>
  </tr>
</table>

        </div>
  </div>
    
</div>




<style type="text/css">
	.icons{ font-size:11px;}
	.icons .icon{ float:none; display:block; text-align:center;}
</style>
<div class="wrapper icons">
	<h1 class="phead">自带图标<small>采用css sprite技术将一张图片分离了很多细小的图标供css框架内部使用。图标icon的种类之多基本可以满足所有的网站需要。 </small></h1>
  <div class="row">
    	<div class="one">
        	<i class="icon group"></i>group
        </div>
    	<div class="one">
        	<i class="icon share"></i>share
        </div>
    	<div class="one">
        	<i class="icon globe"></i>globe
        </div>
    	<div class="one">
        	<i class="icon thumbnails"></i>thumbnails
        </div>
    	<div class="one">
        	<i class="icon fullscreen"></i>fullscreen
        </div>
    	<div class="one">
        	<i class="icon magic"></i>magic
        </div>
    	<div class="one">
        	<i class="icon font"></i>font
        </div>
    	<div class="one">
        	<i class="icon question"></i>question
        </div>
    	<div class="one">
        	<i class="icon headset"></i>headset
        </div>
    	<div class="one">
        	<i class="icon items"></i>items
        </div>
    	<div class="one">
        	<i class="icon sort"></i>sort
        </div>
    	<div class="one">
        	<i class="icon flag"></i>flag
        </div>
    	<div class="one">
        	<i class="icon bug"></i>bug
        </div>
    	<div class="one">
        	<i class="icon picture"></i>picture
        </div>
    	<div class="one">
        	<i class="icon square"></i>square
        </div>
    	<div class="one">
        	<i class="icon pause"></i>pause
        </div>
    	<div class="one">
        	<i class="icon vcard"></i>vcard
        </div>
    	<div class="one">
        	<i class="icon hospital"></i>hospital
        </div>
    	<div class="one">
        	<i class="icon more"></i>more
        </div>
    	<div class="one">
        	<i class="icon email"></i>email
        </div>
    	<div class="one">
        	<i class="icon iphone"></i>iphone
        </div>
    	<div class="one">
        	<i class="icon chat"></i>chat
        </div>
    	<div class="one">
        	<i class="icon camera"></i>camera
        </div>
    	<div class="one">
        	<i class="icon heart"></i>heart
        </div>
    	<div class="one">
        	<i class="icon print"></i>print
        </div>
    	<div class="one">
        	<i class="icon bin"></i>bin
        </div>
    	<div class="one">
        	<i class="icon music"></i>music
        </div>
    	<div class="one">
        	<i class="icon home"></i>home
        </div>
    	<div class="one">
        	<i class="icon fire"></i>fire
        </div>
    	<div class="one">
        	<i class="icon search"></i>search
        </div>
    	<div class="one">
        	<i class="icon pencil"></i>pencil
        </div>
    	<div class="one">
        	<i class="icon video"></i>video
        </div>
    	<div class="one">
        	<i class="icon windows"></i>windows
        </div>
    	<div class="one">
        	<i class="icon lock"></i>lock
        </div>
    	<div class="one">
        	<i class="icon flower"></i>flower
        </div>
    	<div class="one">
        	<i class="icon tree"></i>tree
        </div>
    	<div class="one">
        	<i class="icon justify"></i>justify
        </div>
    	<div class="one">
        	<i class="icon pushpin"></i>pushpin
        </div>
    	<div class="one">
        	<i class="icon lines"></i>lines
        </div>
    	<div class="one">
        	<i class="icon check"></i>check
        </div>
    	<div class="one">
        	<i class="icon imac"></i>imac
        </div>
    	<div class="one">
        	<i class="icon macbook"></i>macbook
        </div>
    	<div class="one">
        	<i class="icon ipad"></i>ipad
        </div>
    	<div class="one">
        	<i class="icon ipod"></i>ipod
        </div>
    	<div class="one">
        	<i class="icon phone"></i>phone
        </div>
    	<div class="one">
        	<i class="icon remove"></i>remove
        </div>
    	<div class="one">
        	<i class="icon ok"></i>ok
        </div>
    	<div class="one">
        	<i class="icon ban"></i>ban
        </div>
    	<div class="one">
        	<i class="icon cart"></i>cart
        </div>
    	<div class="one">
        	<i class="icon unlock"></i>unlock
        </div>
    	<div class="one">
        	<i class="icon electricity"></i>electricity
        </div>
    	<div class="one">
        	<i class="icon down"></i>down
        </div>
    	<div class="one">
        	<i class="icon play"></i>play
        </div>
    	<div class="one">
        	<i class="icon chevron-right"></i>chevron-right
        </div>
    	<div class="one">
        	<i class="icon chevron-left"></i>chevron-left
        </div>
    	<div class="one">
        	<i class="icon bluetooth"></i>bluetooth
        </div>
    	<div class="one">
        	<i class="icon usd"></i>usd
        </div>
    	<div class="one">
        	<i class="icon moon"></i>moon
        </div>
    	<div class="one">
        	<i class="icon sun"></i>sun
        </div>
    	<div class="one">
        	<i class="icon cloud"></i>cloud
        </div>
    	<div class="one">
        	<i class="icon direction"></i>direction
        </div>
    	<div class="one">
        	<i class="icon maps"></i>maps
        </div>
    	<div class="one">
        	<i class="icon conversation"></i>conversation
        </div>
    	<div class="one">
        	<i class="icon male"></i>male
        </div>
    	<div class="one">
        	<i class="icon female"></i>female
        </div>
    	<div class="one">
        	<i class="icon delete"></i>delete
        </div>
    	<div class="one">
        	<i class="icon qrcode"></i>qrcode
        </div>
    	<div class="one">
        	<i class="icon barcode"></i>barcode
        </div>
    	<div class="one">
        	<i class="icon keyboard"></i>keyboard
        </div>
    	<div class="one">
        	<i class="icon tablet"></i>tablet
        </div>
    	<div class="one">
        	<i class="icon settings"></i>settings
        </div>
    	<div class="one">
        	<i class="icon cardio"></i>cardio
        </div>
    	<div class="one">
        	<i class="icon fabric"></i>fabric
        </div>
    	<div class="one">
        	<i class="icon scissors"></i>scissors
        </div>
    	<div class="one">
        	<i class="icon microphone"></i>microphone
        </div>
    	<div class="one">
        	<i class="icon webcam"></i>webcam
        </div>
    	<div class="one">
        	<i class="icon comments"></i>comments
        </div>
    	<div class="one">
        	<i class="icon gamepad"></i>gamepad
        </div>
    	<div class="one">
        	<i class="icon calculator"></i>calculator
        </div>
    	<div class="one">
        	<i class="icon turtle"></i>turtle
        </div>
    	<div class="one">
        	<i class="icon hdd"></i>hdd
        </div>
    	<div class="one">
        	<i class="icon nameplate"></i>nameplate
        </div>
    	<div class="one">
        	<i class="icon restart"></i>restart
        </div>
    	<div class="one">
        	<i class="icon pinterest"></i>pinterest
        </div>
    	<div class="one">
        	<i class="icon dropbox"></i>dropbox
        </div>
    	<div class="one">
        	<i class="icon google_plus"></i>google_plus
        </div>
    	<div class="one">
        	<i class="icon yahoo"></i>yahoo
        </div>
    	<div class="one">
        	<i class="icon blogger"></i>blogger
        </div>
    	<div class="one">
        	<i class="icon amazon"></i>amazon
        </div>
    	<div class="one">
        	<i class="icon tumblr"></i>tumblr
        </div>
    	<div class="one">
        	<i class="icon wordpress"></i>wordpress
        </div>
    	<div class="one">
        	<i class="icon evernote"></i>evernote
        </div>
    	<div class="one">
        	<i class="icon pinboard"></i>pinboard
        </div>
    	<div class="one">
        	<i class="icon youtube"></i>youtube
        </div>
    	<div class="one">
        	<i class="icon facebook"></i>facebook
        </div>
    	<div class="one">
        	<i class="icon twitter"></i>twitter
        </div>
    	<div class="one">
        	<i class="icon flickr"></i>flickr
        </div>
    	<div class="one">
        	<i class="icon rss"></i>rss
        </div>
    	<div class="one">
        	<i class="icon skype"></i>skype
        </div>
    	<div class="one">
        	<i class="icon table"></i>table
        </div>
    	<div class="one">
        	<i class="icon chart"></i>chart
        </div>
    	<div class="one">
        	<i class="icon keys"></i>keys
        </div>
    	<div class="one">
        	<i class="icon calendar"></i>calendar
        </div>
    	<div class="one">
        	<i class="icon dislikes"></i>dislikes
        </div>
    	<div class="one">
        	<i class="icon stats"></i>stats
        </div>
    	<div class="one">
        	<i class="icon lightbulb"></i>lightbulb
        </div>
    	<div class="one">
        	<i class="icon wifi"></i>wifi
        </div>
  </div>
    
</div>


<div class="wrapper footer">
	<p>powered by <a href="http://www.keqie.com">渴切- 开源中文css框架</a><br/>
	基于创作共享的<a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="nofollow">署名-非商业使用-相同方 式分享 2.5</a> 协议发布<br/>
	8年专注web前端技术领域的研究和服务工作 </p>
</div>


</body>
</html>